<div class="process-nav" style="background:#3f4752;height: 57px;padding: 14px 24px;">
  <p (click)="esc()" style="float: left;;border-radius: 8px;padding: 4px;width: 50px;height: 30px;text-align: center;cursor: pointer;">
    <span style="color:#fff;">退出</span>
  </p>
  <p (click)="save()" style="float: left;border-radius: 8px;padding: 4px;width: 50px;height: 30px;text-align: center;cursor: pointer;">
    <span style="color:#fff">保存</span>
  </p>
  <p (click)="deldata()" style="float: left;border-radius: 8px;padding: 4px;width: 50px;height: 30px;text-align: center;cursor: pointer;">
    <span style="color:#fff">清除</span>
  </p>
</div>
<div style="box-shadow: 0px -1px 0px #333; ;height: calc(100vh - 57px);display: flex">
  <div style="width:400px;float: left;background: #3f4752;height: 100%">
    <p style="font-size: 16px;color: #fff;text-align: center;padding: 14px 0;margin:0;box-shadow: 0px 0.6px 0px #222;">流程图</p>
    <div class="forbid-drag" id="left" style="padding:24px;position: relative;">
      <div class="node nodesort node1 radius" id="node1">开始</div>
      <div class="node nodesort node2" id="node2">流程</div>
      <div class=" nodesort node3" id="node3">
        <div class="judge node3rota ">
          <span class="node3s">判断</span>
        </div>
      </div>
      <div class="node nodesort node4 radius" id="node4">结束</div>
      <div class="document node5" id="node5">
        <span style="width: 1px;height: 15px;border: 1px solid #346789;position:absolute;z-index: 1;right: -1px;top: 47px;"></span>
        <span class="doc-text">文档</span>
        <div class="doc-left">
          <div class="doc-left-circle"></div>
        </div>
        <div class="doc-right">
          <div class="doc-right-circle"></div>
        </div>
      </div>
      <div class="sort-sub" id="node6">
        <div class="sort-sub-box">
          <span class="sort-sub-text">子流程</span>
        </div>
      </div>
      <div class="data-base" id="node7">数据库</div>
      <div class="note-node" id="node8">
        <span class="note-node-box-line"></span>
        <div class="note-node-box">
          <span class="note-node-box-text">注释</span>
        </div>
      </div>
      <div class="prot-node" id="node9">页面内引用</div>
    </div>
  </div>
  <div style="flex:1;float: left;height: 100%;overflow:hidden !important;position: relative" id="flowWrap" class="pop-up">
    <div class="pos-fixed" style="position:fixed;top:0;left: 0;right: 0;bottom:0;background: rgba(0, 0, 0, .2);z-index: 99;">
      <div style="padding:26px;width:416px;height:164px;background:#fff;position: absolute;top:50%;left: 50%;margin-top:-200px;margin-left:-208px;border-radius: 4px;">
        <div class="ant-confirm-body-wrapper">
          <div class="ant-confirm-body">
            <i style="color: #faad14;" class="anticon anticon-question-circle"></i>
            <span class="ant-confirm-title">
              <span>提示！</span>
            </span>
            <div style="margin:16px 0;">
              <div>确定要删除吗？</div>
            </div>
          </div>
          <div style="text-align: right;" class="ant-confirm-btns">
            <button (click)="popsec()" nz-button="" class="ant-btn" ng-reflect-nz-loading="false">
              <span>取消</span>
            </button>
            <button (click)="popsure()" nz-button="" class="ant-btn ant-btn-primary" ng-reflect-nz-type="primary"
              ng-reflect-nz-loading="false">
              <span>确定 </span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="draggable ui-widget-content" #greet id="right" style="transform:scale(1);width: 100%;height: 100%;background: #eee;">
      <h2 style="width: 100px;height: 100px;position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top:-50px;color: rgba(0, 0, 0, .2)">
        拖放区域
      </h2>

    </div>
  </div>
</div>
